<template>
  <div @click="$router.push('/postdetail/' + postdata.id)">
    <!-- <div>
      {{ postdata.title }}
      {{ postdata.user.nickname }}
      <img :src="postdata.cover[0].url" alt="" />
    </div> -->
    <!-- 判断条件图片大于一张并且小于3张 type==1时 -->
    <div
      class="singlePost"
      v-if="
        postdata.type == 1 &&
        postdata.cover.length > 0 &&
        postdata.cover.length < 3
      "
    >
      <div class="left">
        <div class="title">{{ postdata.title }}</div>
        <div class="info">
          {{ postdata.user.nickname }}&nbsp;{{ postdata.comment_length }}跟帖
        </div>
      </div>
      <img :src="postdata.cover[0].url | fixImgUrl" alt="" class="right" />
    </div>
    <!-- 判断条件图片小于等于3张,type==2时 -->
    <div
      class="multiPost"
      v-if="postdata.type == 1 && postdata.cover.length >= 3"
    >
      <div class="title">
        {{ postdata.title }}
      </div>
      <div class="coverWrapper">
        <img :src="postdata.cover[0].url | fixImgUrl" alt="" class="cover" />
        <img :src="postdata.cover[1].url | fixImgUrl" alt="" class="cover" />
        <img :src="postdata.cover[2].url | fixImgUrl" alt="" class="cover" />
      </div>
      <div class="info">
        {{ postdata.user.nickname }}{{ postdata.comment_length }}跟帖
      </div>
    </div>
    <!-- 视频判断条件,type==2 起码有一张图片的时候-->
    <div
      class="videoPost"
      v-if="postdata.type == 2 && postdata.cover.length > 0"
    >
      <div class="title">{{ postdata.title }}</div>
      <div class="coverWrapper">
        <img :src="postdata.cover[0].url | fixImgUrl" alt="" class="cover" />
        <span class="iconfont iconshipin"></span>
      </div>
      <div class="info">
        {{ postdata.user.nickname }}{{ postdata.comment_length }}跟帖
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["postdata"],
  methods: {
    // fixImgUrl(oldUrl) {
    //   //为了避免图片的不完整
    //   //这里需要判断这个图片到底有没有带axios.default.baseURL前缀地址
    //   //如果没有我就需要带上
    //   if (oldUrl.indexOf("http") > -1) {
    //     return oldUrl;
    //   } else {
    //     return this.$axios.defaults.baseURL + oldUrl;
    //   }
    // },
  },
};
</script>
   
<style lang="less" scoped>
.singlePost {
  display: flex;
  padding: 16/360 * 100vw;
  justify-content: space-around;
  border-bottom: 1px solid #e4e4e4;
  .left {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-around;
    .title {
      font-size: 16/360 * 100vw;
      color: #333;
    }
    .info {
      font-size: 14/360 * 100vw;
      color: #888;
    }
  }
  .right {
    object-fit: cover;
    width: 128/360 * 100vw;
    height: 75/360 * 100vw;
  }
}
.multiPost {
  padding: 16/360 * 100vw;
  border-bottom: 1px solid #e4e4e4;
  .title {
    font-size: 16/360 * 100vw;
    color: #333;
  }
  .info {
    font-size: 14/360 * 100vw;
    color: #888;
  }
  .coverWrapper {
    display: flex;
    justify-content: space-between;
    .cover {
      width: 33%;
      height: 74/360 * 100vw;
      object-fit: cover;
    }
  }
}
.videoPost {
  padding: 16/360 * 100vw;
  border-bottom: 1px solid #e4e4e4;
  .title {
    font-size: 16/360 * 100vw;
    color: #888;
  }
  .coverWrapper {
    margin: 10/360 * 100vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    .cover {
      width: 100%;
      height: 170/360 * 100vw;
      object-fit: cover;
    }
    .iconshipin {
      position: absolute;
      color: #ffffff;
      font-size: 46/360 * 100vw;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 50%;
    }
  }
  .info {
    font-size: 14/360 * 100vw;
  }
}
</style>